結束了 vue-i18n，那今天就要來與各位分享 Vue Router 拉

Router

首先，我們在講 Vue-Router 之前需要先了解 Router 是什麼？
Router 也可以稱之為路由，當我們在網頁上點選超連接時，就可以跳轉到其他的網頁。這時候我們可以透過瀏覽器去觀察網址上的文字，是不斷在切換的狀態，而這樣子的切換過程就叫做「Router (路由)」，而網站的伺服器也透過每個不同的網址，去決定每個時候提供給使用者觀看的資料。

而這又可以分成前端路由與後端路由：

後端路由vs前端路由

當我們在瀏覽器上不斷點選超連結，或是變更網址路徑去切換不同網頁時，瀏覽器就會依照需求給予不同的網址，並且向後端的網頁伺服器發出請求，而當伺服器接收到瀏覽器的請求時，也會回應相對應的內容給瀏覽，這時的瀏覽器就會將內容呈現給使用觀看了，而以上這一連串的操作，則被稱之為「網站路由」。

而這種傳統的後端路由，也可以稱之為「後端路由」，或者是「伺服器端路由」。

Vue-Router

Vue Router 是 Vue.js 官方提供的前端路由管理器，能夠讓我們將原本由後端處理的換頁，變成前端去處理。而 Vue Router 也能讓我們去實現 SPA：單頁式應用，當我們在切換頁面時不用向後端發出請求。

Vue-Router 安裝

依照需求不同有三種方法供使用者安裝：

• Vue Cli安裝
• 已安裝完成 Vue Cli 並追加 Router
• CDN安裝

Vue Cli安裝

當我們在安裝 Vue CLI 時，需要在第二步驟勾選 Router 的選項
詳細可以回顧 ---> Vue Cli 安裝教學

請在此步驟時勾選 Router，其餘步驟皆相同

安裝好 Vue Cli 後接著安裝 Router

假如我們已安裝完成 Vue Cli 的專案後，又想追加安裝 Router 時，提供給各位方法：
首先，先打開此專案下的終端機，輸入指令：

vue add router@next

在 router 後面加上『 @next 』，即可安裝最新版本的Vue Router。

![](https://cdn.discordapp.com/attachments/1006461224021663805/1027493890598633512/unknown.png)

接者輸入：y，並等他跑完安裝

由以上圖可以看到，系統會詢問我們是否採用 history 模式
如果選擇的是 Y，表示專案會採用 history API 來管理

那當我們尚未安裝 Vue Cli 時，也可以透過下面方式安裝：

npm install --save vue-router@next

使用 CDN 安裝Vue Router

當然我們也可以使用 CDN 的方式去安裝 Vue-Router：

<script src="<https://unpkg.com/vue-router@4>"></script>